<script setup lang="js">
    import { reactive,onMounted } from 'vue';
    import axios from 'axios';

    const config = reactive({
        data: [],
            colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
            unit: '万吨',
            showValue: true,
         })
        function getData(){
        //-:获取服务器数据
        axios.get('/api/queryNagrProd')
            .then((response)=>{
                console.log(12)
                if(response.data.code==200){
                console.log(response.data.data)
                let obj = reactive({})
                for(let index=0;index<response.data.data.length;index++){
                    let yobj = response.data.data[index];
                    obj = {
                        name: yobj.year,
                        value: yobj.grainproduction

                    }
                    config.data.push(obj)
                   }
                }
            })
            
    }
    onMounted(()=>{
        getData();
    })
</script>

<template>
    <dv-border-box-1 style="text-align: center;">
        <div class="t">
            <h1 style="padding-top:5px;font-family: 楷体;">全国历年粮食产量</h1>
        </div>
        <dv-capsule-chart :config="config" style="width:90%;height:90%" class="a" />
    </dv-border-box-1>
</template>

<style scoped>
.t{
    padding-top: 0px;
}
.a{
    position:absolute;
    padding-left: 20px;
}
</style>